<template>
   
    <view class="user">
      
        <view v-for="(item, index) in state.pages" :key="index">
            <template v-if="item.name == 'user-info'">
                <w-user-info
                    :content="item.content"
                    :styles="item.styles"
                    :user="userInfo"
                    :is-login="isLogin"
                />
            </template>
           
                <template v-if="item.name == 'my-subscribe'"  >
                    <w-my-subscribe
                        :content="item.content"
                        :userInfo="userInfo"
                        :styles="item.styles"
                    />
                </template>
                <!-- 我的服务 -->
                <template v-if="item.name == 'my-service'" >
                    <!-- <view class='number' v-if="countData&&countData.count!=0">{{countData.count}}</view> -->
                    <card>
                        <w-my-service :content="item.content" :styles="item.styles" />
                    </card>
                    
                </template>
                <template v-if="item.name == 'user-banner'">
                    <card>
                        <w-user-banner :content="item.content" :styles="item.styles" />
                    </card>
                </template>
              
        </view>
        <tabbar />
        <div style="height: 100rpx;width: 100vw;"></div>
    </view>
</template>

<script setup lang="ts">
import { getDecorate,getstafflist } from '@/api/shop'
import { useUserStore } from '@/stores/user'
import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { reactive,onMounted  } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'; // 从正确的模块导入
const state = reactive<{
    pages: any[]
}>
({
    pages: []
})
const countData =reactive<{count:number}>({count:0});
const getData = async () => {
    const data = await getDecorate({ id: 2 })
    state.pages = JSON.parse(data.pages)
    console.log('page', state.pages)
	state.pages.forEach(i=>{
		if(i.title=="我的服务"){
			i.content.data.forEach(j=>{
				console.log('我的服务.j',j.name)
			})
		}
		if(i.content.data){
			i.content.data.forEach(j=>{
				console.log('i.content.j',j)
				// if(j.title=='我的服务')
				// console.log('i.content.name--我的服务',i.content.data)
				// if(j.name=='师傅订单'){
					// getstaff()
				// }
			})
		}
		
	})
}
const getstaff = async () => {
    const getstaff_count = await getstafflist({orderStatus:1,pageNo:1,pageSize:10})
    console.log('getstafflist11',getstaff_count)
	countData.count=getstaff_count.count
	
    // console.log('getstaff.count',getstaff.count)
}
const userStore = useUserStore()
const { userInfo, isLogin } = storeToRefs(userStore)

console.log('11111111122222222221');
const loadMoreData = () => {
   console.log('滑倒底部咯11');
};
onMounted(() => {
	console.log('1111111111');
	onReachBottom(loadMoreData);
});



onShow(() => {
    userStore.getUser()
    uni.setNavigationBarColor({
      frontColor: 'rgba(0, 0, 0, 1)', // 前景色值，包括按钮、标题、状态栏的颜色
      backgroundColor: 'rgba(0,0,0,0)', // 背景颜色值，有效的颜色值，如#000000
      
    })
})
getData()
getstaff()


</script>

<style lang="scss">
.user {
    padding-bottom: 100rpx;
    /* background: linear-gradient(to bottom, #663d74 60rpx, transparent 0); */
	
    height: 100vh;
	background-color: rgba(244, 244, 244, 1);
}
.number {
  width: 16px;
  height: 16px;
  border-radius:8px;
  color:white;
  text-align:center;
  background-color: red;	
  position: relative;
  font-size:12px;
  left:20%;
  top:80px;
}


</style>
